---
id: toggle-group
title: Toggle Group
description: A set of two-state buttons that can be toggled on or off.
---

<ComponentPreview id="ToggleGroup" />

## Anatomy

To set up the toggle group correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="toggle-group" />

## Examples

Learn how to use the `ToggleGroup` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Multiple Selection

Demonstrates how to enable `multiple` selection within the group.

<Example id="multiple" />

### Initial Value

Shows how to set an initial value in the toggle group.

<Example id="initial-value" />

### Using the Root Provider

The `RootProvider` component provides a context for the toggle-group. It accepts the value of the `useToggle-group`
hook. You can leverage it to access the component state and methods from outside the toggle-group.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

<ComponentTypes id="toggle-group" />

### Context

These are the properties available when using `ToggleGroup.Context`, `useToggleGroupContext` hook or `useToggleGroup`
hook.

<ContextType id="toggle-group" />

## Accessibility

### Keyboard Support

<KeyBindingsTable id="toggle-group" />
